<template>
	<view class="login-container">
		<view class="login-header">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="title">员工登录</text>
			<text class="subtitle">欢迎使用工单管理系统</text>
		</view>
		
		<view class="login-form">
			<view class="input-group">
				<input 
					class="input" 
					type="text" 
					v-model="loginForm.account" 
					placeholder="请输入账号" 
					placeholder-class="placeholder"
				/>
			</view>
			
			<view class="input-group">
				<input 
					class="input" 
					type="password" 
					v-model="loginForm.password" 
					placeholder="请输入密码" 
					placeholder-class="placeholder"
				/>
			</view>
			
			<button class="login-button" @click="handleLogin">登录</button>
		</view>
		
		<view class="footer">
			<text class="copyright">© 2025 工单系统</text>
		</view>
	</view>
</template>

<script>
import { login } from '../../api/loginAPI.js'

export default {
	data() {
		return {
			loginForm: {
				account: '',
				password: ''
			},
			userInfo: uni.getStorageSync('userInfo') || null,
			token: uni.getStorageSync('token') || null,
			isLoggedIn: !!uni.getStorageSync('token')
		}
	},
	
	methods: {
		handleLogin() {
			if (!this.loginForm.account) {
				uni.showToast({
					title: '请输入账号',
					icon: 'none'
				})
				return
			}
			
			if (!this.loginForm.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({
				title: '登录中...'
			})
			
			login(this.loginForm)
				.then(res => {
					uni.hideLoading()
					if (res.code === 0) {
						// 登录成功
						const sysUserVO = res.data.sysUserVO
						uni.setStorageSync('userInfo', sysUserVO)
						uni.setStorageSync('token', sysUserVO.token)
						
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						
						// 延迟跳转到任务大厅
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tasklooby/tasklooby'
							})
						}, 1500)
					} else {
						// 登录失败
						uni.showToast({
							title: res.msg || '登录失败',
							icon: 'none'
						})
					}
				})
				.catch(err => {
					uni.hideLoading()
					console.error('登录请求失败:', err)
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					})
				})
		}
	}
}
</script>

<style>
.login-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20rpx;
	padding-top: calc(20rpx + var(--status-bar-height));
	box-sizing: border-box;
}

.login-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80rpx 0 60rpx;
}

.logo {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 30rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 10rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.subtitle {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-top: 10rpx;
}

.login-form {
	padding: 0 40rpx;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.input-group {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 10rpx;
	margin-bottom: 30rpx;
	padding: 0 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10rpx);
}

.input {
	height: 80rpx;
	font-size: 32rpx;
}

.placeholder {
	color: #999;
}

.login-button {
	background: linear-gradient(90deg, #007AFF, #00D1FF);
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 10rpx;
	margin-top: 50rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 122, 255, 0.3);
	transition: all 0.3s ease;
}

.login-button:active {
	transform: translateY(4rpx);
	box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3);
}

.footer {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 40rpx;
}

.copyright {
	color: rgba(255, 255, 255, 0.7);
	font-size: 28rpx;
}
</style>